<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            margin: 0 auto;
            width: 100%;
            height: 100%
        }

        html,
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
    </style>

</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    
    <script>
        var chart, div, popup = '';
        var resources = {
            "text_monday": "周一",
            "text_tuesday": "周二",
            "text_wednesday": "周三",
            "text_thursday": "周四",
            "text_friday": "周五",
            "text_saturday": "周六",
            "text_sunday": "周日",
            "text_effectScatter": "全国主要城市空气质量图",
            "text_maxTemperature": "最高气温",
            "text_minTemperature": "最低气温",
            "text_nextWeekTemperature": "未来一周气温变化",
        }
        var option = null;
        var amap = null;
        var that = this;

        option = {
            title: {
                subtext: resources.text_fictitiouData
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [resources.text_maxTemperature, resources.text_minTemperature]
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [resources.text_monday, resources.text_tuesday, resources.text_wednesday, resources.text_thursday, resources.text_friday, resources.text_saturday, resources.text_sunday]
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: resources.text_maxTemperature,
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [
                            { type: 'max', name: resources.text_maxValue },
                            { type: 'min', name: resources.text_minValue }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: resources.text_averageValue },
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: resources.text_maxValue
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                },
                {
                    name: resources.text_minTemperature,
                    type: 'line',
                    data: [1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [
                            { type: 'max', name: resources.text_maxValue },
                            { type: 'min', name: resources.text_minValue }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: resources.text_averageValue },
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'min'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: resources.text_minValue
                                    }
                                },
                                type: 'min',
                                name: '最低点'
                            }]
                        ]
                    }
                }
            ]
        };

        div = document.createElement('div');


        map.Factory.create('mapui', {
            center: [105.2, 31.6],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 5,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style
        }, (o) => {
            amap = o;
            map.Factory.loadSpecialMap('echarts', () => {
                that.init(amap.pmap);
            })
        });


        function init(map) {
            chart = echarts.init(div, '', {
                width: 600,
                height: 400
            });
            chart.setOption(option);
            map.loadImage('./js_thematic_map_example/images/marker-icon.png', function (error, image) {
                if (error) throw error;
                map.addImage('positionPoint', image);
            });
            this.query(map);
        }

        function query(map) {

            var recordsets = [{ "datasetName": "China_ProCenCity_pt@China", "features": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "SmID": "1", "SmX": "1.2747137542832293E7", "SmY": "4585528.063874258", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025856", "CLASS": "AD", "NAME": "石家庄市", "PINYIN": "Shijiazhuang Shi", "GNID": "130100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [114.5094848350001, 38.04318401909711] }, "id": 1 }, { "type": "Feature", "properties": { "SmID": "2", "SmX": "1.252830846636536E7", "SmY": "4561151.141121053", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025876", "CLASS": "AD", "NAME": "太原市", "PINYIN": "Taiyuan Shi", "GNID": "140100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [112.54370979500004, 37.87052281409848] }, "id": 2 }, { "type": "Feature", "properties": { "SmID": "3", "SmX": "1.2439110895738998E7", "SmY": "4989083.583398639", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025896", "CLASS": "AD", "NAME": "呼和浩特市", "PINYIN": "Hohhot Shi", "GNID": "150100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [111.74243438500014, 40.84212928907822] }, "id": 3 }, { "type": "Feature", "properties": { "SmID": "4", "SmX": "1.3739653040744457E7", "SmY": "5131863.424169588", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025916", "CLASS": "AD", "NAME": "沈阳市", "PINYIN": "Shenyang Shi", "GNID": "210100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [123.42540325000004, 41.80533096407363] }, "id": 4 }, { "type": "Feature", "properties": { "SmID": "5", "SmX": "1.3950379753677484E7", "SmY": "5437063.785369059", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025936", "CLASS": "AD", "NAME": "长春市", "PINYIN": "Changchun Shi", "GNID": "220100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [125.31839352000007, 43.81633714406749] }, "id": 5 }, { "type": "Feature", "properties": { "SmID": "6", "SmX": "1.4085297116926836E7", "SmY": "5748886.328199991", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025956", "CLASS": "AD", "NAME": "哈尔滨市", "PINYIN": "Ha'erbin Shi", "GNID": "230100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [126.53037681500007, 45.803316189065896] }, "id": 6 }, { "type": "Feature", "properties": { "SmID": "7", "SmX": "1.3223928426358005E7", "SmY": "3771752.10444645", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025976", "CLASS": "AD", "NAME": "南京市", "PINYIN": "Nanjing Shi", "GNID": "320100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [118.79257021500007, 32.064285844164516] }, "id": 7 }, { "type": "Feature", "properties": { "SmID": "8", "SmX": "1.33569211507522E7", "SmY": "3532788.05150135", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12025996", "CLASS": "AD", "NAME": "杭州市", "PINYIN": "Hangzhou Shi", "GNID": "330100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [119.98726418500007, 30.22720161419226] }, "id": 8 }, { "type": "Feature", "properties": { "SmID": "9", "SmX": "1.304918831308713E7", "SmY": "3740344.509256625", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026016", "CLASS": "AD", "NAME": "合肥市", "PINYIN": "Hefei Shi", "GNID": "340100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [117.22285307000003, 31.824874014167936] }, "id": 9 }, { "type": "Feature", "properties": { "SmID": "10", "SmX": "1.3279633021264289E7", "SmY": "3008648.5344763706", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026036", "CLASS": "AD", "NAME": "福州市", "PINYIN": "Fuzhou Shi", "GNID": "350100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [119.29297310500009, 26.077223354266202] }, "id": 10 }, { "type": "Feature", "properties": { "SmID": "11", "SmX": "1.2896889499498436E7", "SmY": "3335833.97870196", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026056", "CLASS": "AD", "NAME": "南昌市", "PINYIN": "Nanchang Shi", "GNID": "360100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [115.8547295500001, 28.686730739217843] }, "id": 11 }, { "type": "Feature", "properties": { "SmID": "12", "SmX": "1.3023172163842933E7", "SmY": "4392645.394542361", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026076", "CLASS": "AD", "NAME": "济南市", "PINYIN": "Jinan Shi", "GNID": "370100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [116.98914602500008, 36.665943849109375] }, "id": 12 }, { "type": "Feature", "properties": { "SmID": "13", "SmX": "1.2648208904890765E7", "SmY": "4129809.2677930356", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026096", "CLASS": "AD", "NAME": "郑州市", "PINYIN": "Zhengzhou Shi", "GNID": "410100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [113.62079376000008, 34.74889608412978] }, "id": 13 }, { "type": "Feature", "properties": { "SmID": "14", "SmX": "1.2723894786231007E7", "SmY": "3580455.5769788185", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026116", "CLASS": "AD", "NAME": "武汉市", "PINYIN": "Wuhan Shi", "GNID": "420100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [114.30069160000005, 30.596488109186417] }, "id": 14 }, { "type": "Feature", "properties": { "SmID": "15", "SmX": "1.2571860508384045E7", "SmY": "3278243.5791259813", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026136", "CLASS": "AD", "NAME": "长沙市", "PINYIN": "Changsha Shi", "GNID": "430100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [112.93494444500004, 28.231907279225865] }, "id": 15 }, { "type": "Feature", "properties": { "SmID": "16", "SmX": "1.2607962173437864E7", "SmY": "2647870.7767329095", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026156", "CLASS": "AD", "NAME": "广州市", "PINYIN": "Guangzhou Shi", "GNID": "440100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [113.25925122000014, 23.13101816432765] }, "id": 16 }, { "type": "Feature", "properties": { "SmID": "17", "SmX": "1.2062937354028402E7", "SmY": "2610399.4831578615", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026176", "CLASS": "AD", "NAME": "南宁市", "PINYIN": "Nanning Shi", "GNID": "450100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [108.36320996500011, 22.82111229433446] }, "id": 17 }, { "type": "Feature", "properties": { "SmID": "18", "SmX": "1.2283769056446148E7", "SmY": "2272679.9820176405", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026196", "CLASS": "AD", "NAME": "海口市", "PINYIN": "Haikou Shi", "GNID": "460100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [110.34697490000008, 19.99703750440062] }, "id": 18 }, { "type": "Feature", "properties": { "SmID": "19", "SmX": "1.1584406994365932E7", "SmY": "3577624.128900375", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026216", "CLASS": "AD", "NAME": "成都市", "PINYIN": "Chengdu Shi", "GNID": "510100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [104.06449860500004, 30.57459158418677] }, "id": 19 }, { "type": "Feature", "properties": { "SmID": "20", "SmX": "1.186973375884509E7", "SmY": "3080008.8635848477", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026236", "CLASS": "AD", "NAME": "贵阳市", "PINYIN": "Guiyang Shi", "GNID": "520100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [106.62763254000002, 26.65158446925504] }, "id": 20 }, { "type": "Feature", "properties": { "SmID": "21", "SmX": "1.1447329876034709E7", "SmY": "2861348.613809453", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026256", "CLASS": "AD", "NAME": "昆明市", "PINYIN": "Kunming Shi", "GNID": "530100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [102.83311390000006, 24.88273902429022] }, "id": 21 }, { "type": "Feature", "properties": { "SmID": "22", "SmX": "1.0149031439931486E7", "SmY": "3459205.8604936074", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026276", "CLASS": "AD", "NAME": "拉萨市", "PINYIN": "Lhasa Shi", "GNID": "540100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [91.17030061500009, 29.654421619201518] }, "id": 22 }, { "type": "Feature", "properties": { "SmID": "23", "SmX": "1.212678825249799E7", "SmY": "4075013.25053011", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026296", "CLASS": "AD", "NAME": "西安市", "PINYIN": "Xi'an Shi", "GNID": "610100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [108.93679234500006, 34.34345385913458] }, "id": 23 }, { "type": "Feature", "properties": { "SmID": "24", "SmX": "1.1558672287511146E7", "SmY": "4308931.491261594", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026316", "CLASS": "AD", "NAME": "兰州市", "PINYIN": "Lanzhou Shi", "GNID": "620100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [103.83331980000013, 36.060370854115426] }, "id": 24 }, { "type": "Feature", "properties": { "SmID": "25", "SmX": "1.1329764579788513E7", "SmY": "4385648.7294257805", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026336", "CLASS": "AD", "NAME": "西宁市", "PINYIN": "Xining Shi", "GNID": "630100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [101.7770068750001, 36.61551172910987] }, "id": 25 }, { "type": "Feature", "properties": { "SmID": "26", "SmX": "1.1825230270808395E7", "SmY": "4648319.232892305", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026356", "CLASS": "AD", "NAME": "银川市", "PINYIN": "Yinchuan Shi", "GNID": "640100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [106.22785090500008, 38.4860603740935] }, "id": 26 }, { "type": "Feature", "properties": { "SmID": "27", "SmX": "9753174.278435523", "SmY": "5438401.560120752", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026376", "CLASS": "AD", "NAME": "乌鲁木齐市", "PINYIN": "Urumqi Shi", "GNID": "650100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [87.61425523000015, 43.82500784906757] }, "id": 27 }, { "type": "Feature", "properties": { "SmID": "28", "SmX": "1.3532639069939917E7", "SmY": "2880317.0120239877", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026396", "CLASS": "AD", "NAME": "台北市", "PINYIN": "Taipei Shih", "GNID": "710100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [121.56576511000013, 25.037220459287028] }, "id": 28 }, { "type": "Feature", "properties": { "SmID": "29", "SmX": "1.3046158869474063E7", "SmY": "4733914.485993809", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026416", "CLASS": "AB", "NAME": "天津市", "PINYIN": "Tianjin Shi", "GNID": "120000", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [117.19563911500008, 39.08541884908908] }, "id": 29 }, { "type": "Feature", "properties": { "SmID": "30", "SmX": "1.1860826813097375E7", "SmY": "3447713.3939502495", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026436", "CLASS": "AB", "NAME": "重庆市", "PINYIN": "Chongqing Shi", "GNID": "500000", "XZNAME": "", "Field_SmGeoPosition": "2492624" }, "geometry": { "type": "Point", "coordinates": [106.54762008500006, 29.56466470420296] }, "id": 30 }, { "type": "Feature", "properties": { "SmID": "31", "SmX": "1.3521945890529728E7", "SmY": "3663107.71662176", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026456", "CLASS": "AB", "NAME": "上海市", "PINYIN": "Shanghai Shi", "GNID": "310000", "XZNAME": "", "Field_SmGeoPosition": "2652824" }, "geometry": { "type": "Point", "coordinates": [121.46970664500009, 31.23347603917659] }, "id": 31 }, { "type": "Feature", "properties": { "SmID": "32", "SmX": "1.263896460820918E7", "SmY": "2534330.7125967303", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026476", "CLASS": "AB", "NAME": "澳门", "PINYIN": "Aomen", "GNID": "820000", "XZNAME": "", "Field_SmGeoPosition": "0" }, "geometry": { "type": "Point", "coordinates": [113.53775083000005, 22.18982010434874] }, "id": 32 }, { "type": "Feature", "properties": { "SmID": "33", "SmX": "1.2708117209860487E7", "SmY": "2544968.844054693", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026496", "CLASS": "AB", "NAME": "香港", "PINYIN": "Xianggang", "GNID": "810000", "XZNAME": "", "Field_SmGeoPosition": "80" }, "geometry": { "type": "Point", "coordinates": [114.15895922000004, 22.278278479346675] }, "id": 33 }] }, "fieldCaptions": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "SmGeoPosition"], "fieldTypes": ["INT32", "DOUBLE", "DOUBLE", "INT32", "INT32", "INT32", "INT64", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "INT64"], "fields": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "Field_SmGeoPosition"] }, { "datasetName": "China_Capital_pt@China", "features": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "SmID": "1", "SmX": "1.2957801616844445E7", "SmY": "4852151.575504352", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "11894784", "CLASS": "AB", "NAME": "北京市", "PINYIN": "Beijing Shi", "GNID": "110000", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [116.40191241000012, 39.905033414083526] }, "id": 1 }] }, "fieldCaptions": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "SmGeoPosition"], "fieldTypes": ["INT32", "DOUBLE", "DOUBLE", "INT32", "INT32", "INT32", "INT64", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "INT64"], "fields": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "Field_SmGeoPosition"] }];

            features = recordsets && recordsets[0] && recordsets[0].features;
            map.addLayer({
                "id": "points",
                "type": "symbol",
                "layout": {
                    "icon-image": "positionPoint",
                    "icon-size": 0.8,
                    "icon-offset": [0, -15] //设置偏移量
                },
                "source": {
                    "type": "geojson",
                    "data": features
                }
            });

            map.on('click', 'points', function (e) {

                popup = new mapboxgl.Popup({ maxWidth: 'none' });
                popup.setLngLat(e.lngLat.toArray())
                    .setDOMContent(div) // sets a popup on this marker
                    .addTo(map);

                chart.setOption({
                    title: {
                        text: e.features[0].properties.NAME + resources.text_nextWeekTemperature
                    },
                    series: [
                        {
                            name: resources.text_maxTemperature,
                            data: [10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10)],
                        },
                        {
                            name: resources.text_minTemperature,
                            data: [8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10)],

                        }
                    ]
                });

            });
        }



    </script>
</body>

</html>